import { ChapterContext } from '@/hooks/useChapterContext'
import Typography from '@mui/material/Typography'
import React, { useContext, useState } from 'react'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import { maxHeight } from '@mui/system'

interface Props{
  disabled?:boolean
}
export default function PropertyCard(props:Props){
  
  const chapterContext = useContext(ChapterContext)
  const [chapter, setChapter] = chapterContext?.chapter
  const [currentCard, setCurrentCard] = chapterContext.currentCard
  const [_, setRefresh] = chapterContext.refresh

  const [propertyName, setPropertyName] = useState('')
  const [propertyValue, setPropertyValue] = useState('')

  const addProperty = ()=>{
    if(!propertyName)return
    chapter.property[propertyName] = propertyValue
    setRefresh(new Date().getTime())
  }

  const delProperty = (key:string)=>{
    delete chapter.property[key]
    setRefresh(new Date().getTime())
  }

  const keys = Object.keys(chapter.property)

  return <div style={{marginTop:20, maxHeight:600, overflow:'auto'}}>
    {
      !props?.disabled
      ?<div>
        <h2> 属性编辑器 </h2>
        <TextField label="属性名称" variant="standard" value={propertyName} onChange={(e)=>setPropertyName(e.target.value)} />
        <TextField label="初始值" variant="standard" value={propertyValue} onChange={(e)=>setPropertyValue(e.target.value)}/>
        <Button onClick={addProperty}>添加属性</Button>
      </div>
      :null
    }
    {
      keys?.map?.((item:any, index:number)=>(
        <div key={index}>
          <TextField label={item} variant="standard" disabled={props.disabled} value={chapter.property[item]} onChange={(e)=>{
            chapter.property[item] = e.target.value
            setRefresh(new Date().getTime())
          }} />
          {
            !props.disabled?<Button onClick={()=>delProperty(item)}>删除</Button>:null
          }
          
        </div>
      ))
    }
    
  </div>
}

